import './screen.scss'

import { lazy, Suspense } from 'react'
import { PlugInUnit } from '../PlugInUnit'

const SignUp = lazy(() => import('../SignUp'))

const Screen = ({ imageUrl }) => {
    return (
        <Suspense fallback={<div>材料运输</div>}>
            <div className="ScreenLogin">
                <img className="LoginBack" src={imageUrl + 'LoginBack.png'} alt="" />
                <div className="ScreenLogin__Box">
                    <div className="Top">
                        <img className="TopL" src={imageUrl + '01.png'} alt="" />
                        <img className="TopR" src={imageUrl + '01.png'} alt="" />
                    </div>
                    <div className="Box">
                        <div className="Title">系统登录</div>
                        <SignUp />
                    </div>
                    <div className="Back">
                        <div className="item" style={{ '--i': 0 }}></div>
                        <div className="item" style={{ '--i': 1 }}></div>
                        <div className="item" style={{ '--i': 2 }}></div>
                        <div className="item" style={{ '--i': 3 }}></div>
                        <div className="item" style={{ '--i': 4 }}></div>
                        <div className="item" style={{ '--i': 5 }}></div>
                        <div className="item" style={{ '--i': 6 }}></div>
                        <div className="item" style={{ '--i': 7 }}></div>
                        <div className="item" style={{ '--i': 8 }}></div>
                        <div className="item" style={{ '--i': 9 }}></div>
                        <div className="item" style={{ '--i': 10 }}></div>
                        <div className="item" style={{ '--i': 11 }}></div>
                        <div className="item" style={{ '--i': 12 }}></div>
                        <div className="item" style={{ '--i': 13 }}></div>
                        <div className="item" style={{ '--i': 14 }}></div>
                        <div className="item" style={{ '--i': 15 }}></div>
                        <div className="item" style={{ '--i': 16 }}></div>
                        <div className="item" style={{ '--i': 17 }}></div>
                        <div className="item" style={{ '--i': 18 }}></div>
                        <div className="item" style={{ '--i': 19 }}></div>
                        <div className="item" style={{ '--i': 20 }}></div>
                    </div>
                </div>
            </div>
        </Suspense>
    )
}

export default Screen
